<template>
  <div>
    <el-row style="margin-bottom: 5px" :gutter="10">
      <!-- v-hasPermi="['demo:demo:export']" -->
      <el-button
        type="warning"
        plain
        icon="el-icon-download"
        style="margin: 5px"
        size="mini"
        @click="handleExport">
        <!-- 导出 -->
        {{ $t('导出') }}
      </el-button>
    </el-row>
    <el-table max-height="600" v-loading="loading" :data="tableData" style="width: 100%" ref="multipleTable">
      <!-- 	快递标识号(和租户唯一)-->
      <el-table-column show-overflow-tooltip prop="expressNo" :label="$t('快递标识号')" align="center" />
      <!-- 卖家管理-"查看卖家快递"和"编辑卖家快递-"快递类型123，要改成 邮局，黑猫，佐川 -->
      <el-table-column show-overflow-tooltip prop="type" :label="$t('快递类型')" align="center">
        <template slot-scope="{ row }">
          <div :style="{ color: $randomColor(row.type) }" v-if="row.type == '1'">
            {{ $t('邮局') }}
          </div>
          <div :style="{ color: $randomColor(row.type) }" v-if="row.type == '2'">
            {{ $t('黑猫') }}
          </div>
          <div :style="{ color: $randomColor(row.type) }" v-if="row.type == '3'">
            {{ $t('佐川') }}
          </div>
        </template>
      </el-table-column>
      <!-- 	长度(0:代表不限制) -->
      <el-table-column
        show-overflow-tooltip
        prop="length"
        :label="$t('长度') + '(cm)'"
        align="center"
        width="100">
        <template slot-scope="{ row }">
          <!-- 不限 -->
          {{ +row.length == 0 ? $t('不限') : row.length }}
        </template>
      </el-table-column>
      <!-- 	宽度(0:代表不限制) -->
      <el-table-column show-overflow-tooltip prop="width" :label="$t('宽度') + '(cm)'" align="center">
        <template slot-scope="{ row }">
          <!-- 不限 -->
          {{ +row.width == 0 ? $t('不限') : row.width }}
        </template>
      </el-table-column>
      <!-- 	高度(0:代表不限制) -->
      <el-table-column show-overflow-tooltip :label="$t('高度') + '(cm)'" prop="height" align="center">
        <template slot-scope="{ row }">
          <!-- 不限 -->
          {{ +row.height == 0 ? $t('不限') : row.height }}
        </template>
      </el-table-column>
      <!-- 	重量 -->
      <el-table-column show-overflow-tooltip prop="weight" :label="$t('重量') + '(g)'" align="center" />
      <!-- 	价格 -->
      <el-table-column width="150" prop="price" :label="$t('价格') + '(JPY)'" align="center">
        <template slot-scope="{ row }">
          <!-- <el-input
            :disabled="!canEdit"
            type="number"
            oninput="value=value.replace( /[0-9]/g, '')"
            v-model.number="row.price" /> -->
          <el-input-number
            style="width: 120px"
            v-model.number="row.price"
            :disabled="!canEdit"
            controls-position="right"
            :precision="0"
            :min="0" />
        </template>
      </el-table-column>
      <!-- 	捆包数量 -->
      <el-table-column show-overflow-tooltip prop="packageNum" :label="$t('包裹份数')" align="center" />
      <!-- 	捆包费用 -->
      <el-table-column prop="bundleFee" width="150" :label="$t('捆包费用') + '(JPY)'" align="center">
        <template slot-scope="{ row }">
          <!-- <el-input :disabled="!canEdit" type="number" v-model.number="row.bundleFee" /> -->
          <el-input-number
            style="width: 120px"
            v-model.number="row.bundleFee"
            :disabled="!canEdit"
            controls-position="right"
            :precision="0"
            :min="0" />
        </template>
      </el-table-column>
      <!-- 		时效 -->
      <el-table-column show-overflow-tooltip prop="time" :label="$t('时效')" align="center" width="100" />
      <!-- 是否快递 0：普通 1：快递 -->
      <el-table-column show-overflow-tooltip prop="isFast" :label="$t('是否快递')" align="center">
        <template slot-scope="{ row }">
          <span v-if="row.isFast == 0">
            <!-- 普通 -->
            {{ $t('普通') }}
          </span>
          <span v-if="row.isFast == 1">
            <!-- 快递 -->
            {{ $t('快递') }}
          </span>
        </template>
      </el-table-column>
      <!--	是否启用 0：不禁用 1：禁用-->
      <el-table-column show-overflow-tooltip prop="enable" :label="$t('是否启用')" align="center">
        <template slot-scope="{ row }">
          <el-switch
            v-model="row.enable"
            active-color="#13ce66"
            inactive-color="#ccc"
            :inactive-value="0"
            :active-value="1"
            :disabled="!canEdit">
          </el-switch>
          <!-- <span v-if="row.enable == '0'">不禁用</span>
          <span v-if="row.enable == '1'">禁用</span> -->
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="remark" width="150" :label="$t('备注')" align="center" />
    </el-table>
    <div style="text-align: right; margin-top: 15px">
      <el-button type="primary" @click="handleUpdate">
        <!-- 保存 -->
        {{ $t('保存') }}
      </el-button>
    </div>
  </div>
</template>

<script>
import { init, list, update } from '@/api/platform/expressTempl'

export default {
  activated() {
    this.$nextTick(() => this.$refs['multipleTable']?.doLayout())
  },
  data() {
    return {
      loading: false,
      pageTotal: 0,
      tableData: [],
    }
  },
  props: {
    FormData: {
      type: Object,
      default: {},
    },
    canEdit: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    this.getList()
  },
  watch: {
    FormData: function (newV) {
      this.getList()
    },
  },

  methods: {
    handleClose() {
      this.$emit('close')
    },
    /**区分地区：初始化接口 */
    init() {
      const data = {
        distrId: this.FormData.distrId,
      }
      init(data).then((res) => {
        const { code, data, msg } = res
        if (code === 200) {
          this.$message({ type: 'success', message: msg })

          this.getList()
        }
      })
    },
    /**查看商家：表格结构 */
    getList() {
      this.loading = true
      const data = {
        // distrId: this.FormData.distrId,
      }
      list(data).then((res) => {
        console.log(`res ==>`, JSON.parse(JSON.stringify(res)))
        this.tableData = res.data
        this.loading = false
      })
    },
    /** 导出不限地区的快递列表 */
    handleExport() {
      this.download(
        'distribution/express/export',
        {
          ...this.queryParams,
        },
        `not_limit_express_${new Date().getTime()}.xlsx`,
      )
    },
    handleUpdate() {
      const data = {
        list: this.tableData,
        distrId: this.FormData.distrId,
      }
      update(data).then((res) => {
        const { code, data, msg } = res
        if (code === 200) {
          this.$message({ type: 'success', message: msg })

          this.getList()
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped></style>
